
function products(a) {
    // 获取父节点
    const cakeProduct = document.querySelector('.cakes-product')

    // 开始先清空容器内容


    // for循环遍历
    for (let item of a) {
        // 创建商品盒子
        const goodsCard = document.createElement('div')
        // 添加面具盒子
        const backMask = document.createElement('div')
        // 添加图片
        const img = document.createElement('img')
        // 添加商品信息
        const goodsInfo = document.createElement('div')
        // 添加信息左侧
        const left = document.createElement('div')
        // 添加商品名
        const cakeName = document.createElement('div')
        // 添加奶油备注
        const subTitle = document.createElement('div')
        // 添加价格栏目
        const cakeprice = document.createElement('div')
        // 添加价格
        const price = document.createElement('span')
        // 添加“起”小字
        const extra = document.createElement('b')
        // 添加右侧信息
        const right = document.createElement('div')
        // 添加一个空盒子tags
        const tags = document.createElement('div')
        // 添加购买按钮
        const button = document.createElement('div')
        // 添加购买按钮的字样
        const buy = document.createElement('span')

        // 把各个盒子层级封装
        goodsCard.append(img)
        goodsCard.append(backMask)
        goodsCard.append(goodsInfo)
        goodsInfo.append(left)
        goodsInfo.append(right)
        left.append(cakeName)
        left.append(subTitle)
        left.append(cakeprice)
        cakeprice.append(price)
        cakeprice.append(extra)
        right.append(tags)
        right.append(button)
        button.append(buy)

        // 给盒子加类名
        goodsCard.classList.add('goods-card')
        backMask.classList.add('backMask')
        goodsInfo.classList.add('goods-card-info')
        img.classList.add('product-img')
        left.classList.add('left')
        cakeName.classList.add('cake-title')
        subTitle.classList.add('subTitle')
        cakeprice.classList.add('cake-price')
        price.classList.add('base-price')
        extra.classList.add('extra')
        right.classList.add('right')
        tags.classList.add('tags')
        button.classList.add('buy-button')
        buy.classList.add('buy')


        // 给商品名字修改
        cakeName.innerHTML = `${item.pname}`;
        // 给base-price渲染价格
        price.innerHTML = `${item.price}`;
        extra.innerHTML = '起';
        buy.innerHTML = '购买';
        img.src = item.URL
        subTitle.innerHTML = '淡奶油'
        cakeProduct.append(goodsCard)

    }
}

function pages(a) {
    // 获取父节点
    const page = document.querySelector('.goods-page');
    // 清空调用的数据

    // 循环数据
    for (let item of a) {
        // 创建goods
        const goods = document.createElement('div');
        // 创建img
        const img = document.createElement('img');
        // 创建goods-card-info盒子
        const div0 = document.createElement('div');
        //将goods的子盒子塞进来
        goods.append(img);
        goods.append(div0);
        //给goods添加类名
        goods.classList.add('goods-card');
        //给创建goods-card-info盒子里面添加两个div
        const left = document.createElement('div');
        const right = document.createElement('div');
        // 将这两个盒子塞进div0中
        div0.append(left);
        div0.append(right);
        //在left中添加两个div
        const title = document.createElement('div');
        const price = document.createElement('div');
        left.append(title);
        left.append(price);
        //在price盒子中加入俩个span 
        const basePrice = document.createElement('span');
        const extra = document.createElement('span');
        price.append(basePrice);
        price.append(extra);
        //在right盒子中加入一个div 和一个按钮
        const blank = document.createElement('div');
        const btn = document.createElement('button')
        right.append(blank);
        right.append(btn);
        //图片加地址
        img.src = item.url
        //给goods-card-info加类名
        div0.classList.add('goods-card-info');

        //给left加类名
        left.classList.add('left');
        // 给title加类名
        title.classList.add('title');
        // 给price加类名
        price.classList.add('price');
        // 给base-price加类名
        basePrice.classList.add('price');
        // 给extra加类名
        extra.classList.add('extra');
        // 给right加类名
        right.classList.add('right');
        // 给btn加类名
        btn.classList.add('btn');


        // 给title文字修改
        title.innerHTML = `${item.p}`;
        // console.log(title);
        //给base-price 渲染价格
        basePrice.innerHTML = `${item.price}`;
        extra.innerHTML = '起';
        btn.innerHTML = '购买'


        page.append(goods)

    }

}


// 蛋糕全产品
const allcakes = [
    { URL: '../img/cakes/product/jointly/cakes1.jpg', pname: '好利来×LINE FRIENDS联名款 minini萌趣乐园', price: ' ¥ 239.00' },
    { URL: '../img/cakes/product/jointly/cakes2.jpg', pname: '哈利波特联名 霍格沃茨城堡', price: ' ¥ 329.00' },
    { URL: '../img/cakes/product/jointly/cakes3.jpg', pname: '哈利波特联名 预言家日报', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes4.jpg', pname: '三丽鸥联名 美乐蒂野餐趴', price: ' ¥ 329.00' },
    { URL: '../img/cakes/product/jointly/cakes5.jpg', pname: '三丽鸥联名 美乐蒂梦幻乐园', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes6.jpg', pname: '三丽鸥联名 大耳狗云上派对', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes7.jpg', pname: '三丽鸥联名 大耳狗天空茶会', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes8.jpg', pname: '迪士尼草莓熊联名 “莓”开眼笑', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes9.jpg', pname: '迪士尼草莓熊联名 遇见“莓”好', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes10.jpg', pname: 'LINE FRIENDS联名 布朗可妮莓果园', price: ' ¥ 239.00' },
    { URL: '../img/cakes/product/jointly/cakes11.jpg', pname: 'LINE FRIENDS联名 布朗可妮巧乐园', price: ' ¥ 269.00' },
    { URL: '../img/cakes/product/jointly/cakes12.jpg', pname: '迪士尼巴斯光年联名 飞船启航', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes13.jpg', pname: '迪士尼巴斯光年联名 星际战警', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes14.jpg', pname: '迪士尼巴斯光年联名 星际之旅', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes15.jpg', pname: '三丽鸥联名 酷洛米暗夜城堡', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes16.jpg', pname: '三丽鸥联名 摇滚甜心酷洛米', price: ' ¥ 279.00' },
    { URL: '../img/cakes/product/jointly/cakes17.jpg', pname: '奥特曼联名款 大决战！迪迦奥特曼', price: ' ¥ 399.00' },
    { URL: '../img/cakes/product/jointly/cakes18.jpg', pname: '奥特曼联名款 光之巨人!迪迦奥特曼', price: ' ¥ 399.00' },
    { URL: '../img/cakes/product/jointly/cakes19.jpg', pname: '宝可梦联名款 皮卡丘与精灵球款', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes20.jpg', pname: '宝可梦联名款 可达鸭乐园款', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/jointly/cakes21.jpg', pname: '宝可梦联名款 小火龙火山款', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/classic/class1.jpg', pname: '半熟芝士生日蛋糕系列', price: ' ¥ 189.00' },
    { URL: '../img/cakes/product/classic/class2.jpg', pname: '风韵花舞', price: ' ¥ 239.00' },
    { URL: '../img/cakes/product/classic/class3.jpg', pname: '锦韵琼花', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/classic/class4.jpg', pname: '生生之丘', price: ' ¥ 239.00' },
    { URL: '../img/cakes/product/classic/class5.jpg', pname: '星月山海', price: ' ¥ 239.00' },
    { URL: '../img/cakes/product/classic/class6.jpg', pname: '缤果奇梦', price: ' ¥ 199.00' },
    { URL: '../img/cakes/product/classic/class7.jpg', pname: '珍果满园', price: ' ¥ 199.00' },
    { URL: '../img/cakes/product/classic/class8.jpg', pname: '花漾莓果', price: ' ¥ 269.00' },
    { URL: '../img/cakes/product/classic/class9.jpg', pname: '春田花语', price: ' ¥ 269.00' },
    { URL: '../img/cakes/product/classic/class10.jpg', pname: '芳果缤纷', price: ' ¥ 199.00' },
    { URL: '../img/cakes/product/classic/class11.jpg', pname: '缤纷果漾', price: ' ¥ 269.00' },
    { URL: '../img/cakes/product/classic/class12.jpg', pname: '富贵兔兔', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/child/child1.jpg', pname: '欢乐起航', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/child/child2.jpg', pname: '小小飞行员', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/child/child3.jpg', pname: '欢乐牧场', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/child/child4.jpg', pname: '甜蜜花园', price: ' ¥ 199.00' },
    { URL: '../img/cakes/product/child/child5.jpg', pname: '甜蜜小家', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/child/child6.jpg', pname: '天真烂漫', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/child/child7.jpg', pname: '快乐成长', price: ' ¥ 199.00' },
    { URL: '../img/cakes/product/child/child8.jpg', pname: '萌猫乐园', price: ' ¥ 199.00' },
    { URL: '../img/cakes/product/child/child9.jpg', pname: '彩虹天使', price: ' ¥ 209.00' },
    { URL: '../img/cakes/product/child/child10.jpg', pname: '小小旅行家', price: ' ¥ 299.00' },
    { URL: '../img/cakes/product/loving/loving1.jpg', pname: '福寿绵长', price: ' ¥ 429.00' },
    { URL: '../img/cakes/product/loving/loving2.jpg', pname: '福桃贺寿', price: ' ¥ 999.00' },
    { URL: '../img/cakes/product/loving/loving3.jpg', pname: '长乐永康', price: ' ¥ 299.00' },
    { URL: '../img/pastry/pastry-1.jpg', pname: '爱情就像一场赌局，输赢都是自己的心在承受', price: '¥ 59.00' },
    { URL: '../img/pastry/pastry-2.jpg', pname: '爱情让人变得脆弱，失去自我，成为别人的附庸', price: '¥ 59.00' },
    { URL: '../img/pastry/pastry-3.jpg', pname: '爱情是一场幻觉，让人迷失方向，最终落得个孤独终老的下场', price: '¥ 59.00' },
    { URL: '../img/pastry/pastry-4.jpg', pname: '爱情是一种奢侈品，只有少数人才能拥有，大多数人只能望而却步', price: '¥ 59.00' },
    { URL: '../img/pastry/pastry-5.jpg', pname: '爱情是一种毒药，让人沉迷其中，无法自拔', price: '¥ 59.00' },
    { URL: '../img/pastry/pastry-6.jpg', pname: '爱情是一种束缚，让人失去了自由和独立', price: '¥ 59.00' },
    { URL: '../img/pastry/pastry-7.jpg', pname: '爱情是世间最美好的情感，让人感受到生命的温暖和幸福', price: '¥ 59.00' },
    { URL: '../img/pastry/pastry-8.jpg', pname: '爱情是一种力量，能够战胜一切困难和挑战，让人们变得更加坚强和勇敢', price: '¥ 59.00' },
    { URL: '../img/pastry/pastry-9.jpg', pname: '爱情是一种灵魂的契合，让人们在彼此的陪伴中找到了真正的自我', price: '¥ 59.00' },
    { URL: '../img/pastry/pastry-10.jpg', pname: '爱情是一种奉献，让人们愿意为对方付出一切，包括时间、精力和生命', price: '¥ 59.00' },
    { URL: '../img/pastry/pas-12.jpg', pname: '爱情是一种成长，让人们在相互理解和包容中不断进步和完善自己', price: '¥ 59.00' },

]
// 零食糕点
const pas = [
    { url: '../img/pastry/pas-01.jpg', p: '情如纸薄易撕裂，缘似线细难牵系', price: '¥ 4240.00' },
    { url: '../img/pastry/pas-02.jpg', p: '长太息以掩涕兮，哀民生之多艰', price: '¥ 1520.00' },
    { url: '../img/pastry/pas-03.jpg', p: '十年生死两茫茫，不思量，自难忘', price: '¥ 250.00' },
    { url: '../img/pastry/pas-04.jpg', p: '雕栏玉砌应犹在，只是朱颜改', price: '¥ 220.00' },
    { url: '../img/pastry/pas-05.jpg', p: '东风夜放花千树，更吹落、星如雨', price: '¥ 410.00' },
    { url: '../img/pastry/pas-06.jpg', p: '曾经沧海难为水，除却巫山不是云', price: '¥ 1530.00' },
    { url: '../img/pastry/pas-07.jpg', p: '世情薄，人情恶，雨送黄昏花易落', price: '¥ 120.00' },
    { url: '../img/pastry/pas-08.jpg', p: '天长地久有时尽，此恨绵绵无绝期', price: '¥ 1140.00' },
    { url: '../img/pastry/pas-09.jpg', p: '寻寻觅觅，冷冷清清，凄凄惨惨戚戚', price: '¥ 240.00' },
    { url: '../img/pastry/pas-10.jpg', p: '离离原上草，一岁一枯荣', price: '¥ 640.00' },
    { url: '../img/pastry/pas-11.jpg', p: '滚滚长江东逝水，浪花淘尽英雄', price: '¥ 460.00' },
    { url: '../img/pastry/pas-12.jpg', p: '爱已成灰泪已干，此生无缘再相见', price: '¥ 4246.00' },
]
// 面包土司
const bre = [
    { url: '../img/pastry/Bread-01.jpg', p: '小方土司', price: '¥ 10.00' },
    { url: '../img/pastry/Bread-02.jpg', p: '玫瑰切片蛋糕', price: '¥ 18.00' },
    { url: '../img/pastry/Bread-03.jpg', p: '卡通吐司', price: '¥ 10.00' }
]
// 零食中点
const sna = [
    { url: '../img/pastry/snack-01.jpg', p: '鲜花饼', price: '¥ 45.00' },
    { url: '../img/pastry/snack-02.jpg', p: '葡萄奶酥', price: '¥ 16.00' },
    { url: '../img/pastry/snack-03.jpg', p: '忘忧蛋黄酥', price: '¥ 1060.00' },
    { url: '../img/pastry/snack-04.jpg', p: '解忧竹竹', price: '¥ 15.00' },
    { url: '../img/pastry/snack-05.jpg', p: '锦韵茶糕', price: '¥ 106.00' },
    { url: '../img/pastry/snack-06.jpg', p: '蛋黄水滴', price: '¥ 12.00' },
    { url: '../img/pastry/snack-07.jpg', p: '何以忘忧', price: '¥ 1000.00' },
    { url: '../img/pastry/snack-08.jpg', p: '小方故事', price: '¥ 256.00' },
    { url: '../img/pastry/snack-09.jpg', p: '一地鸡毛', price: '¥ 1.00' },
    { url: '../img/pastry/snack-10.jpg', p: '双博流泪', price: '¥ 1005.00' },
]
// 巧克力
const cho = [
    { url: '../img/pastry/pastry-1.jpg', p: '可口可乐联名限定 蒲公英空气巧克力', price: '¥ 59.00' },
    { url: '../img/pastry/chocolate-02.jpg', p: '咖啡豆巧', price: '¥ 38.00' },
    { url: '../img/pastry/chocolate-03.jpg', p: '生巧克力', price: '¥ 69.00' },

]
products(allcakes)
pages(pas)
pages(bre)
pages(sna)
pages(cho)



